<!--头部-->
<!--头部-->
<!--头部-->
<template>
  <header>
    <div class="content">
      <div class="logo">
        <router-link to="/theMenu">
          <div class="logoBg1"></div>
          <div class="logoBg2"></div>
        </router-link>

      </div>
      <div class="theUser">
        <span>您好:</span>
        <span>李英</span>
        <span>2023年03月31日</span>
        <router-link to="/myToDo"><span class="toDo">我的待办<span>{{myToDo.totalCount}}</span></span></router-link>
      </div>
    </div>

  </header>
</template>
<script setup>
import {numberOfBacklog} from "@/api/index.js";
import useMyToDo from "@/stores/myToDo.js"
const myToDo = useMyToDo()
const request =async () => {
   const toDo = await numberOfBacklog()
    myToDo.totalCount =toDo.num
}
request()
</script>


<style scoped lang="less">
header {
  height: 80px;
  background: #FFFFFF;
  border: 1px solid #DDDDDD;
  box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.20);
  box-sizing: border-box;
  .content {
    max-width: 1400px;
    margin:  0 auto;
    display: flex;
    justify-content: space-between;
    align-items: center;

    .logo {
      div {
        display: inline-block;
      }
      .logoBg1 {
        width: 134px;
        height: 80px;
        background-image: url("@/assets/img/logo@2x.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
      }

      .logoBg2 {
        margin-left: 24px;
        width: 239px;
        height: 80px;
        background-image: url("@/assets/img/wenziLogos@2x.png");
        background-repeat: no-repeat;
        background-size: 100%;
        background-position: center;
      }
    }

    .theUser {
      font-size: 14px;
      color: #606266;
      font-weight: 500;

      span {
        margin: 0 6px;
      }

      .toDo {
        font-size: 16px;
        color: #303133;
        font-weight: 700;
        margin-left: 18px;

        span {
          font-weight: 500;
          position: relative;
          top: -13px;
          left: -9px;
          font-size: 9px;
          color: #FFFFFF;
          text-align: center;
          display: inline-block;
          width: 30px;
          background-color: red;
          border-radius: 40%;
        }
      }
    }
  }

}

</style>
